<script setup>
import FormComponent from "@/components/form/modle/FormComponent.vue";
import {ref} from "vue";
import axios from "axios";
import {ElMessage} from "element-plus";
import {useStore} from "vuex";
import AEModle from "@/components/form/ operate/AEModle.vue";
import DepartmentAE from "@/components/form/ operate/DepartmentAE.vue";
const store = useStore()
axios.get("/department/query").then(res => {
   tableData.value = res.data.data
   store.commit("setDepartmentArr", tableData.value)
}).catch(err => {
   console.log(err)
})
let labArr = ref(
    [{dname: "部门名称"}]
)
let tableData = ref([])
function deleteForm(index) {
   //console.log("删除" + index);
   //删除数组中指定元素
   axios.delete("/department/delete?did=" + tableData.value[index].did).then(res => {
      //console.log(res);
      if (res.data.code === 200) {
         ElMessage("删除成功")
         tableData.value.splice(index, 1);
         store.commit("setDepartmentArr", tableData)
      } else {
         ElMessage("删除失败")
      }
   }).catch(err => {
      console.log(err);
   })

}
function addClick() {
   store.commit("setShow", true)
   form.value.did = ""
   form.value.dname =""
   store.commit("setDepartmentForm", form.value)
   type.value=true
}
function editClick(index) {
   store.commit("setShow", true)
   type.value=false
   form.value=tableData.value[index]
   store.commit("setDepartmentForm", form.value)
}
let type=ref(true)
let form = ref({
   dname: "",
   did: ""
})
</script>

<template>
   <button
       style="height:25px;font-size: 14px;background-color: rgba(64,158,255,0.81);width: 100px;text-align:  center;cursor:pointer;border-radius: 10px;color: white;border: none;margin-left: 30px;margin-top: 30px;float: none"
       @click="addClick">添加
   </button>
 <DepartmentAE :type="type"></DepartmentAE>
   <form-component :label-arr="labArr" :table-data="tableData">
      <el-table-column label="操作" width="270">
         <template v-slot="scope">
            <button
                style="height:25px;font-size: 14px;background-color: rgba(64,158,255,0.81);width: 100px;text-align:  center;cursor:pointer;border-radius: 10px;color: white;border: none;float: none"
                @click="deleteForm(scope.$index)">删除
            </button>

            <button
                style="height:25px;font-size: 14px;background-color: rgba(64,158,255,0.81);width: 100px;text-align:  center;cursor:pointer;border-radius: 10px;color: white;border: none;margin-left: 30px;float: none"
                @click="editClick(scope.$index)">编辑
            </button>
         </template>
      </el-table-column>
   </form-component>
</template>

<style scoped>

</style>